<template>
  <div class="app-page-box">
    <div class="app-page">
      <div class="top">
        <Back label="待提交详情" />
        <h2>新增融资申请</h2>
        <a-button style="background: #fc5451; color: #fff" @click="submit">全部完成后提交</a-button>
      </div>
      <div class="apply">
        <div class="apply-item" @click="onNav(1, 'lessee')">
          <div class="info">
            <h2>客户信息</h2>
            <div class="tip">谁要融资</div>
          </div>
          <a-button>{{ filterDone(bussInfo.lesseeModuleVO && bussInfo.lesseeModuleVO.moduleLesseeIsComplete) }}</a-button>
          <div class="context" v-if="bussInfo.lesseeModuleVO && bussInfo.lesseeModuleVO.moduleLesseeIsComplete > 0">
            <div class="context-item"><span class="buss-label">客户名称：</span>{{ bussInfo.lesseeModuleVO.custName }}</div>
            <div class="context-item"><span class="buss-label">证件号码：</span>{{ bussInfo.lesseeModuleVO.certNo }}</div>
          </div>
          <div class="content" v-else>请选择融资人</div>
          <img src="/@/assets/images/userinfo.png" alt="" />
        </div>
        <div class="apply-item" style="background: #b9f2e9" @click="onNav(2)">
          <div class="info">
            <h2>租赁设备</h2>
            <div class="tip">要买什么</div>
          </div>
          <a-button>{{ filterDone(bussInfo.leaseHoldModuleVO && bussInfo.leaseHoldModuleVO.moduleLeaseInfoIsComplete) }}</a-button>
          <div class="context" v-if="bussInfo.leaseHoldModuleVO && bussInfo.leaseHoldModuleVO.number > 0">
            <div class="context-item">{{ bussInfo.leaseHoldModuleVO.leaseName }}</div>
            <div class="context-item">
              <span class="buss-label-gray"
                >设备数量：<i>{{ bussInfo.leaseHoldModuleVO.number }}</i></span
              >
              <span class="buss-label-gray"
                >设备总价：<i>{{ bussInfo.leaseHoldModuleVO.totalPurchasePrice }}</i></span
              >
            </div>
          </div>
          <div class="content" v-else>选择意向设备</div>
          <img src="/@/assets/images/device.png" alt="" />
        </div>
        <div class="apply-item" style="background: #aed8f3" @click="onNav(3)">
          <div class="info">
            <h2>融资方案</h2>
            <div class="tip">如何还款</div>
          </div>
          <a-button>{{ filterDone(bussInfo.contractClauseModuleVO && bussInfo.contractClauseModuleVO.moduleContractClauseIsComplete) }}</a-button>
          <div class="context" v-if="bussInfo.contractClauseModuleVO && bussInfo.contractClauseModuleVO.moduleContractClauseIsComplete > 0">
            <div class="context-item">{{ bussInfo.contractClauseModuleVO.templateName }}</div>
            <div class="context-item">
              <span class="buss-label-gray"
                >首付{{ bussInfo.contractClauseModuleVO.firstPayRate }}%：<i>{{ bussInfo.contractClauseModuleVO.purchaseAmt }}</i></span
              >
              <span class="buss-label-gray"
                >融资总额：<i>{{ bussInfo.contractClauseModuleVO.financeAmt }}</i></span
              >
            </div>
          </div>
          <div class="content" v-else>选择融资方案</div>
          <img src="/@/assets/images/program.png" alt="" />
        </div>
        <div class="apply-item" style="background: #e4e1f6" @click="onNav(4, 'guarantor')">
          <div class="info">
            <h2>担保方式</h2>
            <div class="tip">如何担保</div>
          </div>
          <a-button>{{ filterDone(bussInfo.guarantorModuleVO && bussInfo.guarantorModuleVO.moduleGuarantorIsComplete) }}</a-button>

          <div class="context" v-if="bussInfo.guarantorModuleVO && bussInfo.guarantorModuleVO.moduleGuarantorIsComplete > 0">
            <div class="context-item">
              <span class="buss-label"
                >抵押担保：<i v-for="(item, index) in bussInfo.guarantorModuleVO.guarantorInner" :key="index">{{ item.guarantee }};</i></span
              >
            </div>
            <div class="context-item">
              <span class="buss-label"
                >担保方数量：<i>{{ bussInfo.guarantorModuleVO.guarantorNumber }}</i></span
              >
            </div>
          </div>
          <div class="content" v-else>添加担保措施</div>
          <img src="/@/assets/images/manner.png" alt="" />
        </div>
        <div class="apply-item" style="background: #f9e8a5" @click="onNav(5)">
          <div class="info">
            <h2>影像资料</h2>
            <div class="tip">上传材料</div>
          </div>
          <a-button>{{ filterDone(bussInfo.auditFileModuleVO && bussInfo.auditFileModuleVO.moduleAuditFileIsComplete) }}</a-button>
          <div class="content">
            <span>应上传：{{ (bussInfo.auditFileModuleVO && bussInfo.auditFileModuleVO.uploadNumber) || 0 }}</span>
            <span>已上传：{{ (bussInfo.auditFileModuleVO && bussInfo.auditFileModuleVO.alreadyUploadNumber) || 0 }}</span>
            <span>未上传：{{ (bussInfo.auditFileModuleVO && bussInfo.auditFileModuleVO.notUploadNumber) || 0 }}</span>
          </div>
          <img src="/@/assets/images/materials.png" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
  import { computed, onMounted, ref } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import Back from '/@/components/go-back/index.vue';
  import { rzApplyApi } from '/@/api/system/rzApply';
  import { useRzApplyStore } from '/@/store/modules/system/rzApply';
  import { message } from 'ant-design-vue/lib';
  let rzApplyStore = useRzApplyStore();
  const router = useRouter();
  const route = useRoute();
  const bussNo = ref('');
  const bussInfo = ref({});
  onMounted(() => {
    const query = route.query;
    bussNo.value = query.bussNo;
    // alert(query.bussNo);
    if (query.bussNo) {
      getData();
    }
  });
  async function getData() {
    const res = await rzApplyApi.getOrderInfo({ bussNo: bussNo.value });
    if (res.code == 0) {
      bussInfo.value = res.data;
    }
  }
  function filterDone(str) {
    if (str == 0) {
      return '未录入';
    } else if (str == 1) {
      return '不完整';
    } else {
      return '已录入';
    }
  }

  async function onNav(path, role) {
    rzApplyStore.setMode('edit');
    const check = checkComplete(path);
    if (!check) return;

    if (path == 1) {
      role && rzApplyStore.setRole(role);
      rzApplyStore.setLessee(null);
      if (bussInfo.value.lesseeModuleVO && bussInfo.value.lesseeModuleVO.moduleLesseeIsComplete) {
        router.push({
          path: '/rzApply/lessee-list',
          query: {
            bussNo: bussNo.value,
          },
        });
      } else {
        router.push({
          path: '/rzApply/person',
          query: {
            bussNo: bussNo.value,
          },
        });
      }
    } else if (path == 2) {
      if (bussInfo.value.leaseHoldModuleVO && bussInfo.value.leaseHoldModuleVO.number > 0) {
        router.push({
          path: '/rzApply/device-list',
          query: {
            bussNo: bussNo.value,
          },
        });
      } else {
        router.push({
          path: '/rzApply/device-params',
          query: {
            bussNo: bussNo.value,
          },
        });
      }
    } else if (path == 3) {
      if (bussInfo.value.contractClauseModuleVO.moduleContractClauseIsComplete > 0) {
        const res = await rzApplyApi.calcTrialInfo({ bussNo: bussNo.value });
        if (res.code == 0) {
          rzApplyStore.setCalcTrialParam(res.data.orders);
          router.push({
            path: '/rzApply/planDetail',
            query: {
              bussNo: bussNo.value,
            },
          });
        }
      } else {
        router.push({
          path: '/zjCount/plan',
          query: {
            bussNo: bussNo.value,
          },
        });
      }
    } else if (path == 4) {
      role && rzApplyStore.setRole(role);
      rzApplyStore.setGuarantor(null);
      // alert(bussInfo.value.guarantorModuleVO && bussInfo.value.guarantorModuleVO.moduleGuarantorIsComplete)
      if (bussInfo.value.guarantorModuleVO && bussInfo.value.guarantorModuleVO.moduleGuarantorIsComplete>0) {
        router.push({
          path: '/rzApply/surety-list',
          query: {
            bussNo: bussNo.value,
          },
        });
      } else {
        router.push({
          path: '/rzApply/person',
          query: {
            bussNo: bussNo.value,
          },
        });
      }
    } else if (path == 5) {
      router.push({
        path: '/rzApply/yxzl',
        query: {
          bussNo: bussNo.value,
        },
      });
    }
  }
  function submit() {
    rzApplyApi.submit({ bussNo: bussNo.value });
  }
  function checkComplete(path) {
    if (path >= 2 && bussInfo.value.lesseeModuleVO && bussInfo.value.lesseeModuleVO.moduleLesseeIsComplete < 2) {
      message.warning('请将客户信息录入完整');
      return false;
    }
    if (path >= 3 && bussInfo.value.leaseHoldModuleVO && bussInfo.value.leaseHoldModuleVO.moduleLeaseInfoIsComplete < 2) {
      message.warning('请将租赁设备录入完整');
      return false;
    }
    if (path >= 4 && bussInfo.value.contractClauseModuleVO && bussInfo.value.contractClauseModuleVO.moduleContractClauseIsComplete < 2) {
      message.warning('请将融资方案录入完整');
      return false;
    }
    if (path >= 5 && bussInfo.value.guarantorModuleVO && bussInfo.value.guarantorModuleVO.moduleGuarantorIsComplete < 2) {
      message.warning('请将担保方式录入完整');
      return false;
    }
    return true;
  }
</script>
<style scoped lang="less">
  @import './index.less';
  .app-page {
    width: 100%;
    padding: 23rem 25rem 0;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    .top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      h2 {
        font-size: 30rem;
      }
    }
    .apply {
      flex: 1;
      overflow: auto;
      margin-top: 32rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding-bottom: 0;
      padding-bottom: 23rem;
      .apply-item {
        width: 1447rem;
        height: 151rem;
        background: #d7ecfa;
        border-radius: 8rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-left: 53rem;
        box-sizing: border-box;
        margin-bottom: 10rem;
        &:last-child {
          margin-bottom: 0;
        }
        .info {
          width: 90rem;
          h2 {
            font-weight: bold;
            font-family: HYLiLiangHeiJ;
            font-size: 22rem;
            color: #3ba6ec;
          }
          .tip {
            height: 14rem;
            font-size: 14rem;
            color: #000000;
          }
        }
        .ant-btn {
          margin: 0 56rem 0 48rem;
          background: #fc5451;
          color: #fff;
        }
        .content {
          width: 688rem;
          height: 97rem;
          font-family: Microsoft YaHei;
          font-size: 20rem;
          color: #fc5451;
          background: #f5fafe;
          border-radius: 6rem;
          display: flex;
          align-items: center;
          justify-content: space-around;
          span {
            font-size: 16rem;
            color: #747474;
          }
        }
        .context {
          // width: 688rem;
          flex: 1;
          height: 97rem;
          font-family: Microsoft YaHei;
          font-size: 20rem;
          background: rgba(255, 255, 255, 0.5);
          border-radius: 6rem;
          display: flex;
          flex-direction: column;
          justify-content: center;
          padding-left: 26rem;
          box-sizing: border-box;
          .context-item {
            display: flex;
            font-size: 16rem;
            line-height: 30rem;
            .buss-label {
              font-size: 16rem;
              color: #856ce1;
              line-height: 30rem;
              i {
                font-size: 14rem;
                color: #000000;
                line-height: 30rem;
                font-style: normal;
              }
            }
            .buss-label-gray {
              min-width: 150rem;
              font-size: 14rem;
              color: #747474;
              line-height: 30rem;
              i {
                font-size: 14rem;
                color: #000000;
                line-height: 30rem;
                font-style: normal;
              }
            }
          }
        }
        img {
          height: 100%;
        }
      }
    }
  }
</style>
